.index {
    width: 100%;
    height: 100%;
    background: #fff;
    .ant-carousel {
        .slick-dots {
            li {
                button {
                    background: #333;
                }
                &.slick-active {
                    button {
                        background: #fea724;
                    }
                }
            }
        }
        .slick-dots-bottom {
            bottom: 30px;
        }
    }
    .hot-list-wrap {
        .slick-dots-bottom {
            bottom: 50px;
        }
    }
    .top-cont {
        width: 100%;
        height: 19%;
        background: url("./../../static/images/topBg.png") left top no-repeat;
        background-size: cover;
        font-size: 18px;
        color: #fff;
        position: relative;
        .store-name-tit {
            padding-left: 20px;
            padding-top: 14px;
        }
        .store-rating {
            position: absolute;
            top: 23%;
            left: 50%;
            transform: translate(-50%, 0);
            text-align: center;
            .store-name {
                font-size: 30px;
                padding-bottom: 16px;
            }
            button {
                width: 110px;
                height: 32px;
                font-size: 16px;
                background: #095aac;
                border-radius: 16px;
                cursor: pointer;
            }
        }
    }
    .left-cont {
        width: 260px;
        height: 100%;
        background: url("./../../static/images/left_bg.png") left top no-repeat;
        background-size: cover;
        font-size: 16px;
        color: #fff;
        position: relative;
        float: left;
        .left-mask {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .75);
        }
        .left-info {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            padding-top: 39%;
            .store-info {
                text-align: center;
                height: 40%;
                .logo {
                    width: 100%;
                    text-align: center;
                    padding-bottom: 34px;
                    img {
                        display: inline-block;
                        width: 110px;
                        height: 110px;
                        border-radius: 55px;
                        background: #fff;
                    }
                }
                .store-name {
                    font-size: 30px;
                    padding-bottom: 16px;
                }
                .store-desc {
                    display: inline-block;
                    max-height: 50px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 90%;
                    font-size: 14px;
                    margin-bottom: 40px;
                    .more {
                        color: #fea724;
                        cursor: pointer;
                    }
                }
                button {
                    width: 126px;
                    height: 50px;
                    font-size: 16px;
                    background: #fff;
                    color: #333;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
            .paihang {
                width: 100%;
                height: 60%;
                padding-top: 30px;
                .ph-icon {
                    width: 100%;
                    text-align: center;
                    padding-bottom: 14px;
                }
                .change-ph {
                    text-align: center;
                    padding-bottom: 50px;
                    span {
                        display: inline-block;
                        width: 50px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        background: #fff;
                        color: #333;
                        cursor: pointer;
                        &.active {
                            background: #fea724;
                            color: #fff;
                        }
                    }
                }
                .ph-list {
                    height: 70%;
                    overflow: hidden;
                    overflow-y: auto;
                    .list-cont {
                        ul {
                            li {
                                display: flex;
                                justify-content: space-around;
                                padding: 0 10px;
                                margin-bottom: 30px;
                                .cup-icon {
                                    display: inline-block;
                                    width: 30px;
                                    height: 30px;
                                    vertical-align: middle;
                                    text-align: center;
                                    line-height: 30px;
                                    margin-right: 10px;
                                    .cup-no {
                                        display: inline-block;
                                        font-size: 12px;
                                        width: 20px;
                                        height: 20px;
                                        background: #fff;
                                        border-radius: 10px;
                                        color: #333;
                                        text-align: center;
                                        line-height: 20px;
                                    }
                                }
                                .ph-item-info {
                                    width: calc(100% - 40px);
                                    display: inline-block;
                                    height: 30px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    vertical-align: middle;
                                    .ph-item-name {
                                        width: 95%;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        font-size: 14px;
                                        color: #fea724;
                                    }
                                    .ph-item-desc {
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    // .bot-cont {
    //     margin-right: -18px;
    //     height: 100%;
    //     background: #ebebeb;
    //     text-align: center;
    //     overflow: hidden;
    //     .bot-emp {
    //         position: relative;
    //         height: 81%;
    //         overflow: hidden;
    //         overflow-y: scroll;
    //         padding: 40px 52px;
    //         .emp-list {
    //             position: relative;
    //             overflow: hidden;
    //             ul {
    //                 position: relative;
    //                 overflow: hidden;
    //                 li.item {
    //                     width: 25%;
    //                     float: left;
    //                     text-align: center;
    //                     cursor: pointer;
    //                     margin-bottom: 40px;
    //                     .emp-avatar {
    //                         max-width: 200px;
    //                         height: 200px;
    //                         background: #f4f4f4;
    //                         overflow: hidden;
    //                         // box-shadow:1px 1px 0px #f0f0f0;
    //                         border: 1px solid #f0f0f0;
    //                         img {
    //                             width: 100%;
    //                             // height: 100%;
    //                         }
    //                     }
    //                     .item-inner-wrap {
    //                         display: inline-block;
    //                         width: 200px;
    //                         height: 100%;
    //                         font-size: 0;
    //                         background: #fff;
    //                         position: relative;
    //                         overflow: hidden;
    //                         p.emp-name {
    //                             font-size: 16px;
    //                             color: #333;
    //                             padding: 14px 0 12px 0;
    //                             b{
    //                                 font-size: 14px;
    //                                 font-weight: 300;
    //                                 color: #999;
    //                             }
    //                         }
    //                         .online{
    //                             background: #27a9f4;
    //                             width: 74px;
    //                             height: 74px;
    //                             line-height: 74px;
    //                             text-align: center;
    //                             transform: rotate(45deg);
    //                             color: #fff;
    //                             font-size: 14px;
    //                             position: absolute;
    //                             top: -37px;
    //                             right: -37px;
    //                             span{
    //                                 position: absolute;
    //                                 line-height: 0;
    //                                 left: 50%;
    //                                 bottom: 12px;
    //                                 transform: translate(-50%,0);
    //                             }
    //                             &.not-online{
    //                                 background: rgba(102,102,102,.7);
    //                             }
    //                         }
    //                     }
    //                 }
    //                 @media screen and ( min-width: 1920px ) {
    //                     li.item {
    //                         .emp-avatar {
    //                             max-width: 350px;
    //                             height: 350px;
    //                             // border-radius: 9px;
    //                             background: #f4f4f4;
    //                             overflow: hidden;
    //                             // box-shadow:1px 1px 0px #f0f0f0;
    //                             border: 1px solid #f0f0f0;
    //                             img {
    //                                 width: 100%;
    //                                 // height: 100%;
    //                             }
    //                         }
    //                         .item-inner-wrap {
    //                             display: inline-block;
    //                             width: 350px;
    //                             height: 100%;
    //                             font-size: 0;
    //                             background: #fff;
    //                             p.emp-name {
    //                                 font-size: 20px;
    //                                 color: #333;
    //                                 padding: 14px 0 12px 0;
    //                             }
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
    .right-cont {
        width: calc(100% - 260px);
        height: 100%;
        background: #fff;
        text-align: center;
        overflow: hidden;
        .right-top {
            width: 100%;
            height: 80px;
            line-height: 80px;
            background: #ffffff;
            border-bottom: 1px solid #e1e1e1;
            font-size: 0;
            text-align: left;
            display: flex;
            align-items: center;
            .top-tit {
                display: inline-block;
                width: 174px;
                height: 100%;
                color: #fff;
                text-align: center;
                font-size: 22px;
                background: #fea724;
            }
            .top-alert {
                width: 100%;
                height: 100%;
                padding-left: 20px;
                display: inline-block;
                font-size: 16px;
                color: #fea724;
                .mar-quee {
                    width: 80%;
                    height: 100%;
                    .index {
                        color: red;
                    }
                    .name {
                        color: #fea724;
                    }
                }
            }
        }
        .bot-cont {
            width: 100%;
            position: relative;
            overflow: hidden;
            height: calc(100% - 80px);
            padding-top: 10px;
            padding-bottom: 20px;
            padding-right: 100px;
            font-size: 0;
            display: flex;
            flex-wrap: wrap;
            .bot-emp {
                position: relative;
                display: inline-block;
                font-size: 0;
                width: 100%;
                height: 50%;
                .bot-tit {
                    width: 100%;
                    height: 60px;
                    margin-top: 15px;
                    // padding-left: 46px;
                    position: relative;
                    text-align: center;
                    .bot-tit-info {
                        display: inline-block;
                        color: #333;
                        font-size: 0;
                        .tit-name {
                            font-size: 26px;
                        }
                        .bot-tit-line {
                            padding-top: 24px;
                            text-align: center;
                            width: 100%;
                            .line {
                                display: inline-block;
                                width: 100px;
                                height: 2px;
                                background: #000;
                            }
                        }
                    }
                }
                .emp-list-wrap {
                    height: 100%;
                    overflow: hidden;
                    overflow-y: auto;
                    padding-left: 0px;
                    padding-top: 10px;
                    position: relative;
                    .tip-arrow {
                        position: absolute;
                        // width: 100%;
                        background: rgba(0, 0, 0, .5);
                        height: 100px;
                        color: #fff;
                        right: 0;
                        top: 25%;
                        z-index: 999;
                        font-size: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        .tip-info {
                            margin-right: 30px;
                            padding-left: 20px;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .iconjiantou {
                            display: inline-block;
                            vertical-align: middle;
                            font-size: 50px;
                            animation: blbl .5s infinite;
                            animation-direction: alternate;
                        }
                        @keyframes blbl {
                            0% {
                                transform: scale(1.1);
                            }
                            50% {
                                transform: scale(0.9);
                            }
                            100% {
                                transform: scale(1);
                            }
                        }
                    }
                    .emp-list {
                        position: relative;
                        padding-left: 20px;
                        ul {
                            position: relative;
                            display: flex;
                            float: left;
                            li.item {
                                // width: 20%;
                                width: 200px;
                                height: 258px;
                                margin-bottom: 60px;
                                float: left;
                                position: relative;
                                margin-right: 15px;
                                .item-inner-wrap {
                                    position: absolute;
                                    bottom: 0;
                                    width: 90%;
                                    height: 200px;
                                    padding-top: 40px;
                                    background: #fff;
                                    box-shadow: 0px 0px 15px 9px rgba(0, 0, 0, .1);
                                    .emp-avatar {
                                        position: absolute;
                                        top: -52px;
                                        left: 50%;
                                        transform: translate(-50%, 0);
                                        width: 100px;
                                        height: 100px;
                                        border-radius: 50px;
                                        overflow: hidden;
                                        cursor: pointer;
                                        img {
                                            width: 100px;
                                            border-radius: 50px;
                                        }
                                    }
                                    .emp-name {
                                        width: 100%;
                                        padding-top: 20px;
                                        font-size: 26px;
                                        color: #333;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                    }
                                    .line-wrap {
                                        width: 100%;
                                        text-align: center;
                                        padding: 5px 0;
                                        .line {
                                            display: inline-block;
                                            width: 46px;
                                            height: 1px;
                                            background: #fea724;
                                        }
                                    }
                                    .emp-job {
                                        font-size: 18px;
                                        color: #333;
                                    }
                                    .btn {
                                        width: 100%;
                                        display: flex;
                                        justify-content: space-around;
                                        // padding-top: 15px;
                                        font-size: 12px;
                                        span {
                                            display: inline-block;
                                            width: 72px;
                                            height: 28px;
                                            line-height: 28px;
                                            background: #999999;
                                            color: #fff;
                                            cursor: pointer;
                                            &.hujiao {
                                                background: #fea724;
                                            }
                                            &.ds {
                                                background: #4e86e1;
                                            }
                                            &.lixian {
                                                background: #333;
                                                color: #fff;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .bot-hot {
                display: inline-block;
                width: 100%;
                height: 50%;
                background: #fff;
                z-index: 999;
                .bot-tit {
                    width: 100%;
                    height: 40px;
                    position: relative;
                    text-align: center;
                    // padding-left: 28px;
                    padding-top: 10px;
                    margin-bottom: 30px;
                    background: #fff;
                    .bot-tit-info {
                        display: inline-block;
                        color: #333;
                        font-size: 0;
                        .tit-name {
                            font-size: 26px;
                        }
                        .bot-tit-line {
                            padding-top: 14px;
                            text-align: center;
                            width: 100%;
                            .line {
                                display: inline-block;
                                width: 100px;
                                height: 2px;
                                background: #000;
                            }
                        }
                    }
                }
                .hot-list-wrap {
                    height: calc(100% - 65px);
                    overflow: hidden;
                    // overflow-y: auto;
                    text-align: left;
                    padding-top: 15px;
                    padding-left: 15px;
                    .hot-list {
                        // padding-left: 28px;
                        padding-bottom: 28px;
                        ul {
                            position: relative;
                            display: flex;
                            flex-wrap: nowrap;
                            float: left;
                        }
                        .no-info {
                            font-size: 18px;
                            text-align: left;
                            padding: 10px 0;
                        }
                        .hot-item {
                            text-align: center;
                            display: inline-block;
                            width: 180px;
                            min-height: 270px;
                            // height: 284px;
                            background: #fff;
                            box-shadow: 0 0 15px 9px rgba(0, 0, 0, .05);
                            margin-right: 15px;
                            margin-left: 15px;
                            margin-bottom: 30px;
                            .hot-item-img {
                                width: 100%;
                                height: 180px;
                                overflow: hidden;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    transition: all .3s;
                                    cursor: pointer;
                                    &:hover {
                                        transform: scale(1.1);
                                    }
                                }
                            }
                            .hot-item-desc {
                                border-top: 1px solid #ddd;
                                padding-bottom: 10px;
                                .item-name {
                                    padding-top: 15px;
                                    font-size: 18px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .line-wrap {
                                    width: 100%;
                                    padding: 10px 0;
                                    text-align: center;
                                    .line {
                                        display: inline-block;
                                        width: 44px;
                                        height: 2px;
                                        background: #fea724;
                                    }
                                }
                                .item-price {
                                    font-size: 18px;
                                    line-height: 18px;
                                    color: #fea724;
                                    .hot-goods-count {
                                        display: inline-block;
                                        line-height: 18px;
                                        font-size: 12px;
                                        color: #00b870;
                                    }
                                }
                            }
                        }
                        // .hot-item{
                        //     width: 328px;
                        //     min-height: 328px;
                        //     // height: 284px;
                        //     background: #fff;
                        //     box-shadow: 0 0 15px 9px rgba(0,0,0,.1);
                        //     margin-top: 30px;
                        //     .hot-item-img{
                        //         width: 100%;
                        //         height: 328px;
                        //         overflow: hidden;
                        //         img{
                        //             // width: 100%;
                        //             height: 100%;
                        //             transition: all .3s;
                        //             cursor: pointer;
                        //             &:hover{
                        //                 transform: scale(1.1);
                        //             }
                        //         }
                        //     }
                        //     .hot-item-desc{
                        //         border-top: 1px solid #ddd;
                        //         padding-bottom: 10px;
                        //         .item-name{
                        //             padding-top: 15px;
                        //             font-size: 26px;
                        //         }
                        //         .line-wrap{
                        //             width: 100%;
                        //             padding: 10px 0;
                        //             text-align: center;
                        //             .line{
                        //                 display: inline-block;
                        //                 width: 44px;
                        //                 height: 2px;
                        //                 background: #fea724;
                        //             }
                        //         }
                        //         .item-price{
                        //             font-size: 18px;
                        //             line-height: 18px;
                        //             color: #fea724;
                        //             .hot-goods-count{
                        //                 display: inline-block;
                        //                 line-height: 18px;
                        //                 font-size: 12px;
                        //                 color: #00b870;
                        //             }
                        //         }
                        //     }
                        // }
                    }
                    // @media screen and ( max-width: 1400px) {
                    //     .hot-list {
                    //         padding-left: 10px;
                    //         .hot-item {
                    //             text-align: center;
                    //             display: inline-block;
                    //             width: 160px;
                    //             min-height: 250px;
                    //             background: #fff;
                    //             box-shadow: 0 0 15px 9px rgba(0, 0, 0, .1);
                    //             .hot-item-img {
                    //                 width: 100%;
                    //                 height: 160px;
                    //                 overflow: hidden;
                    //                 img {
                    //                     // width: 100%;
                    //                     height: 100%;
                    //                 }
                    //             }
                    //         }
                    //     }
                    // }
                    // @media screen and ( min-width: 1600px) {
                    //     .hot-list {
                    //         .hot-item {
                    //             width: 430px;
                    //             min-height: 430px;
                    //             background: #fff;
                    //             box-shadow: 0 0 15px 9px rgba(0, 0, 0, .1);
                    //             margin-top: 30px;
                    //             .hot-item-img {
                    //                 width: 100%;
                    //                 height: 430px;
                    //                 overflow: hidden;
                    //                 img {
                    //                     // width: 100%;
                    //                     height: 100%;
                    //                 }
                    //             }
                    //         }
                    //     }
                    // }
                    // @media screen and ( min-width: 1920px) {
                    //     .hot-list {
                    //         .hot-item {
                    //             width: 550px;
                    //             min-height: 550px;
                    //             background: #fff;
                    //             box-shadow: 0 0 15px 9px rgba(0, 0, 0, .1);
                    //             margin-top: 30px;
                    //             .hot-item-img {
                    //                 width: 100%;
                    //                 height: 550px;
                    //                 overflow: hidden;
                    //                 img {
                    //                     // width: 100%;
                    //                     height: 100%;
                    //                 }
                    //             }
                    //         }
                    //     }
                    // }
                }
            }
        }
    }
    .alert-msg {
        min-width: 454px;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #00b870;
        font-size: 0px;
        z-index: 99999;
        .alert-wrap {
            background: #fff;
            border-radius: 30px;
            box-shadow: 0 0 25px 5px rgba(0, 0, 0, .15);
            transition: all .3s;
            transform-origin: left;
            .alert-laba {
                transition: all .3s;
                display: inline-block;
                vertical-align: middle;
                width: 50px;
                height: 50px;
                background: url("./../../static/images/laba.png") left center;
                background-size: contain;
            }
            animation:mymove .5s;
            // animation-fill-mode : forwards;
            .alert-msg-info {
                display: inline-block;
                vertical-align: middle;
                padding-left: 10px;
                width: calc(100% - 50px);
                height: 50px;
                font-size: 16px;
                transition: all .3s;
                word-wrap: none;
                animation: mymove2 .5s;
                // animation-fill-mode : forwards;
                span {
                    display: inline-block;
                    width: 0px;
                    height: 50px;
                    overflow: hidden;
                    transition: all 3s;
                    animation: mymove3 3s;
                    animation-fill-mode: forwards;
                }
            }
        }
    }
    @keyframes mymove {
        0% {
            width: 0px;
            height: 50px;
            transform: scale(0);
            background: transparent;
        }
        50% {
            width: 50px;
            height: 50px;
            background: transparent;
            transform: scale(1);
        }
        100% {
            transform: scale(1);
            width: calc(100% - 50px);
            background: #fff;
        }
    }
    @keyframes mymove2 {
        0% {
            opacity: 0;
            width: 0px;
            transform: scale(0);
        }
        30% {
            opacity: 0;
            width: calc(100% - 100px);
            transform: scale(1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
            width: calc(100% - 50px);
        }
    }
    @keyframes mymove3 {
        0% {
            opacity: 0;
            width: 0px;
        }
        100% {
            opacity: 1;
            width: 100%;
        }
    }
    .refresh-top {
        position: absolute;
        right: 18px;
        bottom: 20px;
        text-align: center;
        z-index: 99999;
        span {
            display: block;
            background: rgba(102, 102, 102, .7);
            font-size: 30px;
            color: #fff;
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 30px;
            cursor: pointer;
            &.icon-zhiding {
                margin-bottom: 20px;
            }
            &:hover {
                background: rgba(43, 162, 231, .7);
            }
        }
    }
    .right-nav {
        width: 100px;
        height: 100%;
        background: #282828;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        z-index: 1000;
        .icon-wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .nav-icon {
                margin: 150px 0;
                cursor: pointer;
                position: relative;
                .store-qr-code {
                    display: none;
                    width: 200px;
                    min-height: 200px;
                    padding-bottom: 10px;
                    background: #fff;
                    position: absolute;
                    top: 0;
                    right: 60px;
                    box-shadow: 0 0 25px 5px rgba(0, 0, 0, .3);
                    .tit {
                        display: inline-block;
                        padding: 10px 0;
                        color: #00b870;
                    }
                    img {
                        width: 90%;
                    }
                }
                &:hover {
                    .store-qr-code {
                        display: inherit;
                    }
                }
            }
        }
    }
    .store-desc-more,
    .big-avatar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        .store-desc-more-wrap,
        .big-avatar-wrap {
            width: 50%;
            height: 300px;
            overflow: hidden;
            overflow-y: auto;
            padding: 10px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .big-avatar-wrap {
            background: transparent;
            text-align: center;
            width: initial;
            height: initial;
            overflow: initial;
            img {
                max-height: 600px;
            }
        }
    }
}